/* ==========================================================
   WEBDESIGN STYLE.CSS
   RG DIGITALDRUCKFORUM GÖHRINGER

   KOMPLETT NEU

   GLOBALE ELEMENTE:
   - Header
   - Navigation
   - Footer
   - Cookie Banner
   - Back to Top
   - Grundschrift
   - globale Farben

   kommen weiterhin aus:
   ../style.css


   INHALT:

   01  Variablen / Seite
   02  Breadcrumb
   03  Allgemeine Webdesign-Bereiche
   04  Hero
   05  Responsive Design
   06  Aufbau einer Website
   07  Mini-Navigation
   08  Mini-Hero
   09  Mini-Marquee
   10  Mini-Leistungen
   11  Mini-Produkte
   12  Mini-Kunden
   13  Mini-Historie
   14  Mini-Karriere
   15  Mini-Ansprechpartner
   16  Mini-Kontakt
   17  Mini-Google-Maps
   18  Mini-Footer
   19  Worauf wir achten
   20  Prozess
   21  FAQ
   22  Anfrage
   23  Responsive Regeln
========================================================== */


/* ==========================================================
   01
   VARIABLEN / SEITE
========================================================== */

body#webdesign {

  --wd-bg:
    #101315;

  --wd-bg-deep:
    #090b0c;

  --wd-bg-soft:
    #171b1e;

  --wd-card:
    rgba(
      255,
      255,
      255,
      0.025
    );

  --wd-line:
    rgba(
      255,
      255,
      255,
      0.11
    );

  --wd-line-strong:
    rgba(
      255,
      255,
      255,
      0.19
    );

  --wd-muted:
    rgba(
      255,
      255,
      255,
      0.66
    );

}


/* ----------------------------------------------------------
   WICHTIG:

   Kein overflow:hidden auf .wd-page.

   Sonst können absolute / schwebende Elemente
   beim Bereich "Aufbau einer Website"
   abgeschnitten werden.
---------------------------------------------------------- */

.wd-page {

  position: relative;

  width: 100%;

  padding-top: 92px;

  overflow: visible;

  background:
    var(--wd-bg);

}


.wd-shell {

  width: 100%;

  margin: 0;

  padding-right:
    var(--site-gutter);

  padding-left:
    var(--site-gutter);

}


/* ==========================================================
   02
   BREADCRUMB
========================================================== */

.product-breadcrumb {

  min-height: 54px;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  background:
    var(--wd-bg);

  font-size:
    0.76rem;

  font-weight:
    650;

}


.product-breadcrumb a {

  color: inherit;

  text-decoration: none;

  transition:
    color 0.25s ease;

}


.product-breadcrumb a:hover,
.product-breadcrumb a:focus-visible {

  color:
    var(--red-light);

}


.product-breadcrumb span {

  color:
    rgba(
      255,
      255,
      255,
      0.24
    );

}


.product-breadcrumb strong {

  color:
    #ffffff;

}


/* ==========================================================
   03
   ALLGEMEINE WEBDESIGN-BEREICHE
========================================================== */

.wd-section {

  position: relative;

  width: 100%;

  padding:
    96px 0;

  background:
    var(--wd-bg);

}


.wd-section + .wd-section {

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.055
    );

}


.wd-kicker {

  margin:
    0 0 14px;

  color:
    var(--red-light);

  font-size:
    0.78rem;

  font-weight:
    900;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

}


.wd-section-intro,
.wd-faq-heading {

  max-width:
    900px;

  margin:
    0 0 52px;

}


.wd-section-intro h2,
.wd-faq-heading h2,
.wd-final-card h2 {

  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.35rem
    );

  line-height:
    1;

}


.wd-section-intro > p:last-child {

  max-width:
    720px;

  margin:
    20px 0 0;

  color:
    var(--wd-muted);

  line-height:
    1.72;

}


/* ==========================================================
   04
   HERO

   ORIGINALPOSITION BEIBEHALTEN
========================================================== */

.wd-hero {

  position: relative;

  width: 100%;

  min-height:
    650px;

  overflow: hidden;

  isolation:
    isolate;

  background:
    #080808;

}


/* ----------------------------------------------------------
   HERO BILD
---------------------------------------------------------- */

.wd-hero-bg {

  position: absolute;

  top: -4%;

  right: 0;

  z-index: 0;

  width: 63%;

  height: 108%;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    0.94;

  filter:
    brightness(0.95)
    contrast(1.04);

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000000 0%,
      #000000 62%,
      rgba(0, 0, 0, 0.90) 73%,
      rgba(0, 0, 0, 0.42) 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000000 0%,
      #000000 62%,
      rgba(0, 0, 0, 0.90) 73%,
      rgba(0, 0, 0, 0.42) 88%,
      transparent 100%
    );

}


/* ----------------------------------------------------------
   HERO OVERLAY
---------------------------------------------------------- */

.wd-hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      #080808 0%,
      rgba(8, 8, 8, 0.99) 27%,
      rgba(8, 8, 8, 0.91) 43%,
      rgba(8, 8, 8, 0.55) 58%,
      rgba(8, 8, 8, 0.12) 78%,
      transparent 100%
    ),

    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.04),
      transparent 55%,
      rgba(8, 8, 8, 0.82)
    );

}


/* ----------------------------------------------------------
   HERO INNER
---------------------------------------------------------- */

.wd-hero-inner {

  position: relative;

  z-index: 2;

  min-height:
    650px;

  padding-top:
    52px;

  padding-bottom:
    30px;

  display: flex;

  flex-direction:
    column;

}


/* ==========================================================
   HERO SERVICE WÖRTER
========================================================== */

.wd-hero-services {

  width:
    fit-content;

  margin:
    0 0 38px;

  padding: 0;

  display: flex;

  flex-wrap:
    wrap;

  gap:
    34px;

  list-style:
    none;

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;

}


.wd-hero-service {

  position: relative;

  color:
    rgba(
      255,
      255,
      255,
      0.40
    );

  transition:

    color
    0.35s
    ease,

    transform
    0.35s
    ease;

}


.wd-hero-service::after {

  content: "";

  position: absolute;

  bottom:
    -8px;

  left: 0;

  width: 0;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--red-light);

  transition:
    width
    0.35s
    ease;

}


.wd-hero-service.active {

  color:
    var(--red-light);

  transform:
    translateY(-2px);

}


.wd-hero-service.active::after {

  width: 100%;

}


/* ==========================================================
   HERO TEXT
========================================================== */

.wd-hero-content {

  width:
    min(
      650px,
      53%
    );

}


.wd-hero-content h1 {

  margin:
    0 0 28px;

  color:
    #ffffff;

  font-size:
    clamp(
      3rem,
      4.6vw,
      5.15rem
    );

  line-height:
    0.95;

}


.wd-changing-word {

  display: block;

  min-height:
    1.05em;

  color:
    var(--red-light);

  transition:

    opacity
    0.28s
    ease,

    transform
    0.28s
    ease;

}


.wd-changing-word.is-changing {

  opacity: 0;

  transform:
    translateY(10px);

}


.wd-hero-text {

  max-width:
    610px;

  margin: 0;

  color:
    var(--gray);

  font-size:
    1rem;

  line-height:
    1.75;

}


/* ==========================================================
   HERO FACTS
========================================================== */

.wd-hero-facts {

  width:
    min(
      920px,
      100%
    );

  margin-top:
    auto;

  padding-top:
    36px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

}


.wd-hero-fact {

  position: relative;

  min-height:
    105px;

  padding:
    18px 26px;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    15px;

  align-items:
    start;

  transition:

    transform
    0.35s
    ease,

    background
    0.35s
    ease;

}


.wd-hero-fact:first-child {

  padding-left: 0;

}


.wd-hero-fact:not(:last-child)::after {

  content: "";

  position: absolute;

  top:
    18px;

  right: 0;

  bottom:
    18px;

  width:
    1px;

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

}


.wd-hero-fact-icon {

  min-width:
    34px;

  color:
    var(--red-light);

}


.wd-hero-fact-icon svg {

  width:
    28px;

  height:
    28px;

  display: block;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.wd-hero-fact strong {

  display: block;

  margin-bottom:
    5px;

  color:
    #ffffff;

  font-size:
    0.92rem;

}


.wd-hero-fact p {

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size:
    0.75rem;

  line-height:
    1.5;

}


.wd-hero-fact:hover {

  transform:
    translateY(-4px);

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, 0.08),
      transparent
    );

}


/* ==========================================================
   05
   RESPONSIVE DESIGN
========================================================== */

.wd-responsive-section {

  background:

    radial-gradient(
      circle at 88% 8%,
      rgba(197, 0, 26, 0.08),
      transparent 27%
    ),

    var(--wd-bg);

}


.wd-responsive-layout {

  display: grid;

  grid-template-columns:
    minmax(320px, 0.40fr)
    minmax(0, 0.60fr);

  gap:
    clamp(
      55px,
      6vw,
      95px
    );

  align-items:
    center;

}


/* ==========================================================
   RESPONSIVE LINKS
========================================================== */

.wd-device-cluster {

  width: 100%;

  display: flex;

  flex-direction:
    column;

  gap:
    44px;

}


.wd-cluster-device {

  min-width: 0;

  outline: none;

  cursor: pointer;

  transition:

    transform
    0.40s
    ease,

    opacity
    0.40s
    ease;

}


.wd-cluster-device.is-active {

  transform:
    translateY(-4px);

}


.wd-cluster-label {

  display: block;

  margin-bottom:
    9px;

  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  font-size:
    0.70rem;

  font-weight:
    850;

  transition:
    color
    0.40s
    ease;

}


.wd-cluster-device.is-active
.wd-cluster-label {

  color:
    var(--red-light);

}


/* ==========================================================
   DESKTOP LINKS
========================================================== */

.wd-cluster-desktop {

  width: 100%;

}


.wd-cluster-desktop-frame {

  width: 100%;

  padding:
    7px;

  border:
    5px solid
    #393e41;

  border-radius:
    10px;

  background:
    #050607;

  box-shadow:
    0 24px 50px
    rgba(0, 0, 0, 0.35);

  transition:

    border-color
    0.40s
    ease,

    box-shadow
    0.40s
    ease;

}


.wd-cluster-desktop-stand {

  width:
    90px;

  height:
    30px;

  margin:
    0 auto;

  border-bottom:
    6px solid
    #393e41;

  clip-path:
    polygon(
      35% 0,
      65% 0,
      80% 100%,
      20% 100%
    );

  transition:
    border-color
    0.40s
    ease;

}


/* ==========================================================
   TABLET + SMARTPHONE LINKS
========================================================== */

.wd-device-lower-row {

  width:
    88%;

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(85px, 0.52fr);

  gap:
    42px;

  align-items:
    start;

}


.wd-cluster-tablet {

  width: 100%;

}


.wd-cluster-tablet-frame {

  width: 100%;

  padding:
    7px;

  border:
    5px solid
    #393e41;

  border-radius:
    18px;

  background:
    #050607;

  box-shadow:
    0 22px 46px
    rgba(0, 0, 0, 0.35);

  transition:

    border-color
    0.40s
    ease,

    box-shadow
    0.40s
    ease;

}


.wd-cluster-phone {

  width:
    72%;

  justify-self:
    center;

}


.wd-cluster-phone-frame {

  position: relative;

  width: 100%;

  padding:
    16px 5px 7px;

  border:
    5px solid
    #393e41;

  border-radius:
    22px;

  background:
    #050607;

  box-shadow:
    0 20px 42px
    rgba(0, 0, 0, 0.35);

  transition:

    border-color
    0.40s
    ease,

    box-shadow
    0.40s
    ease;

}


.wd-cluster-phone-speaker {

  position: absolute;

  top:
    6px;

  left:
    50%;

  width:
    24px;

  height:
    3px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.15
    );

  transform:
    translateX(-50%);

}


/* ==========================================================
   INHALT GERÄTE LINKS
========================================================== */

.wd-cluster-screen {

  width: 100%;

  overflow: hidden;

  background:
    #0a0c0d;

}


.wd-cluster-desktop
.wd-cluster-screen {

  aspect-ratio:
    16 / 9;

}


.wd-cluster-tablet
.wd-cluster-screen {

  aspect-ratio:
    3 / 4;

}


.wd-cluster-phone
.wd-cluster-screen {

  aspect-ratio:
    9 / 18;

}


.wd-cluster-mini-nav {

  height:
    12%;

  background:
    #171a1c;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

}


.wd-cluster-mini-hero {

  height:
    48%;

  padding:
    10%;

  display: flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    7px;

  background:

    linear-gradient(
      125deg,
      rgba(197, 0, 26, 0.27),
      transparent 60%
    ),

    #101315;

}


.wd-cluster-mini-hero span {

  width:
    55%;

  height:
    5px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.62
    );

}


.wd-cluster-mini-hero
span:last-child {

  width:
    36%;

  background:
    var(--red-light);

}


.wd-cluster-mini-cards {

  height:
    40%;

  padding:
    7px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    4px;

}


.wd-cluster-mini-cards i {

  border-radius:
    3px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

}


.wd-mini-tablet {

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

}


.wd-mini-phone {

  grid-template-columns:
    1fr;

}


/* ==========================================================
   AKTIVES RESPONSIVE GERÄT LINKS
========================================================== */

.wd-cluster-desktop.is-active
.wd-cluster-desktop-frame,

.wd-cluster-tablet.is-active
.wd-cluster-tablet-frame,

.wd-cluster-phone.is-active
.wd-cluster-phone-frame {

  border-color:
    var(--red-light);

  box-shadow:

    0 24px 50px
    rgba(0, 0, 0, 0.40),

    0 0 22px
    rgba(255, 48, 70, 0.24);

}


.wd-cluster-desktop.is-active
.wd-cluster-desktop-stand {

  border-color:
    var(--red-light);

}


/* ==========================================================
   RESPONSIVE LIVE RECHTS
========================================================== */

.wd-responsive-live {

  min-width: 0;

}


.wd-responsive-live-head {

  min-height:
    28px;

  margin-bottom:
    12px;

  display: flex;

  align-items:
    center;

  gap:
    9px;

}


.wd-responsive-live-dot {

  width:
    7px;

  height:
    7px;

  flex-shrink: 0;

  border-radius:
    50%;

  background:
    var(--red-light);

  box-shadow:
    0 0 12px
    rgba(255, 48, 70, 0.50);

}


.wd-responsive-live-head strong {

  color:
    #ffffff;

  font-size:
    0.80rem;

}


.wd-responsive-live-head small {

  color:
    rgba(
      255,
      255,
      255,
      0.42
    );

  font-size:
    0.70rem;

}


.wd-responsive-live-stage {

  width: 100%;

  min-height:
    610px;

  padding:
    30px 18px;

  display: grid;

  place-items:
    center;

  overflow: hidden;

  border:
    1px solid
    var(--wd-line);

  border-radius:
    24px;

  background:

    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.05),
      transparent 48%
    ),

    #090b0c;

}


/* ==========================================================
   RECHTES LIVE GERÄT
========================================================== */

.wd-responsive-live-device {

  display: flex;

  overflow: hidden;

  border:
    5px solid
    #3e4346;

  background:
    #050607;

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.46);

  transition:

    width
    1.15s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    ),

    height
    1.15s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    ),

    border-radius
    1.15s
    ease,

    border-color
    0.50s
    ease,

    box-shadow
    0.50s
    ease;

}


.wd-responsive-live-device.is-desktop {

  width:
    min(
      100%,
      700px
    );

  height:
    460px;

  border-radius:
    10px;

}


.wd-responsive-live-device.is-tablet {

  width:
    395px;

  height:
    555px;

  border-radius:
    23px;

}


.wd-responsive-live-device.is-phone {

  width:
    245px;

  height:
    545px;

  border-radius:
    30px;

}


.wd-responsive-live-device.is-switching {

  border-color:
    var(--red-light);

  box-shadow:

    0 30px 70px
    rgba(0, 0, 0, 0.46),

    0 0 27px
    rgba(255, 48, 70, 0.24);

}


/* ==========================================================
   LIVE IFRAME
========================================================== */

.wd-responsive-site-window {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

  background:
    #080808;

}


.wd-responsive-main-frame {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  border: 0;

  background:
    #080808;

  pointer-events: none;

  transform-origin:
    top left;

}


/* ==========================================================
   RESPONSIVE ERKLÄRUNG
========================================================== */

.wd-responsive-note {

  margin-top:
    24px;

  display: grid;

  grid-template-columns:
    165px
    minmax(0, 1fr);

  gap:
    25px;

}


.wd-responsive-note span {

  color:
    var(--red-light);

  font-size:
    0.72rem;

  font-weight:
    850;

}


.wd-responsive-note p {

  margin: 0;

  color:
    var(--wd-muted);

  font-size:
    0.82rem;

  line-height:
    1.65;

}


/* ==========================================================
   06
   AUFBAU EINER WEBSITE
========================================================== */

.wd-anatomy-section {

  position: relative;

  overflow: visible;

  background:

    radial-gradient(
      circle at 15% 15%,
      rgba(197, 0, 26, 0.035),
      transparent 28%
    ),

    var(--wd-bg-deep);

}


.wd-anatomy-section
> .wd-shell {

  position: relative;

  overflow: visible;

}


/* ==========================================================
   ANATOMY GESAMTLAYOUT

   Links:
   Beispielwebsite

   Rechts:
   reservierter Platz für Erklärbox
========================================================== */

.wd-anatomy-layout {

  --wd-anatomy-info-width:
    clamp(
      290px,
      24vw,
      370px
    );

  --wd-anatomy-gap:
    clamp(
      38px,
      5vw,
      72px
    );

  position: relative;

  width: 100%;

  min-height:
    600px;

  display: block;

  overflow: visible;

}


/* ==========================================================
   LINKER BROWSER
========================================================== */

.wd-anatomy-browser {

  position: relative;

  width:
    calc(
      100%
      -
      var(--wd-anatomy-info-width)
      -
      var(--wd-anatomy-gap)
    );

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--wd-line);

  border-radius:
    22px;

  background:
    #090b0c;

  box-shadow:
    0 32px 80px
    rgba(0, 0, 0, 0.38);

}


/* ==========================================================
   BROWSERLEISTE
========================================================== */

.wd-anatomy-browserbar {

  height:
    48px;

  padding:
    0 16px;

  display: flex;

  align-items:
    center;

  gap:
    18px;

  background:
    #191c1e;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

}


.wd-anatomy-dots {

  display: flex;

  gap:
    5px;

}


.wd-anatomy-dots span {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.18
    );

}


.wd-anatomy-dots
span:first-child {

  background:
    var(--red-light);

}


.wd-anatomy-url {

  width:
    min(
      310px,
      48%
    );

  padding:
    5px 12px;

  color:
    rgba(
      255,
      255,
      255,
      0.36
    );

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  border-radius:
    999px;

  font-size:
    0.58rem;

}


/* ==========================================================
   ERKLÄRBOX RECHTS

   IMMER SICHTBAR.

   JavaScript verändert nur die Höhe / top-Position,
   passend zum gerade gehoverteten Webseiten-Baustein.
========================================================== */

.wd-anatomy-info {
  position: absolute !important;

  top: 0;
  right: 0;

  width:
    var(--wd-anatomy-info-width);

  height:
    fit-content;

  padding:
    32px;

  opacity: 1 !important;

  visibility:
    visible !important;

  pointer-events:
    auto;

  border:
    1px solid
    var(--wd-line);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(197, 0, 26, 0.11),
      transparent 48%
    ),
    rgba(15, 17, 18, 0.97);

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.32);

  backdrop-filter:
    blur(18px);

  transform:
    none !important;

  transition:
    top 0.55s
    cubic-bezier(
      0.22,
      0.9,
      0.3,
      1
    );

  z-index:
    100;
}


/* ==========================================================
   DIE KLASSE KANN JAVASCRIPT WEITER SETZEN,
   ABER DIE BOX MUSS NICHT ERST EINGEBLENDET WERDEN
========================================================== */

.wd-anatomy-info.is-shown {
  opacity: 1 !important;

  visibility:
    visible !important;

  transform:
    none !important;
}


/* ==========================================================
   REVEAL DARF DIE INFOBOX NIEMALS VERSTECKEN
========================================================== */

.wd-anatomy-info.reveal,
.wd-anatomy-info.reveal.is-visible,
.wd-anatomy-info.reveal.is-shown,
.wd-anatomy-info.reveal.is-visible.is-shown {
  opacity: 1 !important;

  visibility:
    visible !important;

  transform:
    none !important;
}

/* ==========================================================
   ERKLÄRBOX KICKER
========================================================== */

.wd-anatomy-info-kicker {

  margin:
    0 0 24px;

  color:
    var(--red-light);

  font-size:
    0.64rem;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


/* ==========================================================
   ERKLÄRBOX NUMMER
========================================================== */

.wd-anatomy-info-number {

  display: block;

  margin-bottom:
    11px;

  color:
    transparent;

  font-size:
    2.45rem;

  font-weight:
    900;

  line-height:
    1;

  -webkit-text-stroke:
    1px
    var(--red-light);

}


/* ==========================================================
   ERKLÄRBOX TITEL
========================================================== */

.wd-anatomy-info h3 {

  margin:
    0 0 14px;

  color:
    #ffffff;

  font-size:
    clamp(
      1.55rem,
      2.4vw,
      2.35rem
    );

  line-height:
    1.05;

}


/* ==========================================================
   ERKLÄRBOX TEXT
========================================================== */

.wd-anatomy-info
> p:not(.wd-anatomy-info-kicker) {

  margin: 0;

  color:
    var(--wd-muted);

  font-size:
    0.88rem;

  line-height:
    1.65;

}


/* ==========================================================
   ERKLÄRBOX LISTE
========================================================== */

.wd-anatomy-info ul {

  margin:
    24px 0 0;

  padding: 0;

  display: grid;

  gap:
    9px;

  list-style:
    none;

}


.wd-anatomy-info li {

  position: relative;

  padding-left:
    17px;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size:
    0.78rem;

  line-height:
    1.5;

}


.wd-anatomy-info li::before {

  content: "";

  position: absolute;

  top:
    0.60em;

  left: 0;

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    var(--red-light);

}


/* ==========================================================
   ERKLÄRBOX WARUM
========================================================== */

.wd-anatomy-tip {

  margin-top:
    26px;

  padding-top:
    19px;

  border-top:
    1px solid
    var(--wd-line);

}


.wd-anatomy-tip span {

  color:
    var(--red-light);

  font-size:
    0.61rem;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.wd-anatomy-tip p {

  margin:
    7px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.56
    );

  font-size:
    0.75rem;

  line-height:
    1.55;

}


/* ==========================================================
   MINI WEBSITE
========================================================== */

.wd-demo-site {

  position: relative;

  width: 100%;

  overflow: hidden;

  color:
    #ffffff;

  background:
    #0b0d0e;

}


/* ==========================================================
   KOMPLETTE WEBSITE-BEREICHE MARKIEREN
========================================================== */

.wd-anatomy-part {

  position: relative;

  z-index: 1;

  width: 100%;

  outline: none;

  cursor:
    default;

  transition:
    filter
    0.35s
    ease;

}


/* ----------------------------------------------------------
   Roter Rahmen liegt ÜBER dem kompletten Bereich
---------------------------------------------------------- */

.wd-anatomy-part::after {

  content: "";

  position: absolute;

  inset:
    7px;

  z-index:
    60;

  pointer-events:
    none;

  opacity: 0;

  border:
    2px solid
    transparent;

  border-radius:
    14px;

  background:
    transparent;

  box-shadow:
    none;

  transition:

    opacity
    0.35s
    ease,

    border-color
    0.35s
    ease,

    background
    0.35s
    ease,

    box-shadow
    0.35s
    ease;

}


.wd-anatomy-part:hover,
.wd-anatomy-part:focus-visible,
.wd-anatomy-part.is-active {

  z-index:
    5;

  filter:
    brightness(1.055);

}


.wd-anatomy-part:hover::after,
.wd-anatomy-part:focus-visible::after,
.wd-anatomy-part.is-active::after {

  opacity: 1;

  border-color:
    rgba(
      255,
      48,
      70,
      0.96
    );

  background:
    linear-gradient(
      135deg,
      rgba(197, 0, 26, 0.07),
      rgba(197, 0, 26, 0.018)
    );

  box-shadow:

    inset
    0 0 32px
    rgba(197, 0, 26, 0.07),

    0 0 22px
    rgba(255, 48, 70, 0.17);

}


/* ==========================================================
   07
   MINI NAVIGATION
========================================================== */

.wd-demo-header {

  min-height:
    74px;

  padding:
    14px 20px;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  background:
    #0b0d0e;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

}


.wd-demo-brand {

  min-width:
    165px;

  display: flex;

  align-items:
    center;

  gap:
    9px;

}


.wd-demo-brand img {

  width:
    58px;

  height:
    41px;

  object-fit:
    contain;

}


.wd-demo-brand div {

  display: flex;

  flex-direction:
    column;

}


.wd-demo-brand strong {

  color:
    #ffffff;

  font-size:
    0.58rem;

  line-height:
    1.2;

}


.wd-demo-brand span {

  margin-top:
    2px;

  color:
    var(--red-light);

  font-size:
    0.53rem;

  font-weight:
    850;

  line-height:
    1.2;

}


.wd-demo-nav {

  display: flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    11px;

}


.wd-demo-nav span {

  color:
    rgba(
      255,
      255,
      255,
      0.76
    );

  font-size:
    0.43rem;

  font-weight:
    750;

  white-space:
    nowrap;

}


/* ==========================================================
   08
   MINI HERO
========================================================== */

.wd-demo-hero {

  position: relative;

  height:
    390px;

  overflow: hidden;

  background:
    #080808;

}


.wd-demo-hero video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit:
    cover;

}


.wd-demo-hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.82),
      rgba(0, 0, 0, 0.28)
    );

}


.wd-demo-hero-content {

  position: absolute;

  z-index: 3;

  left:
    7%;

  bottom:
    15%;

  width:
    55%;

}


.wd-demo-hero-content h3 {

  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.65rem,
      3.2vw,
      3rem
    );

  line-height:
    0.97;

}


.wd-demo-hero-content h3 span {

  color:
    var(--red-light);

}


.wd-demo-hero-content p {

  max-width:
    420px;

  margin:
    11px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.70
    );

  font-size:
    0.57rem;

  line-height:
    1.5;

}


.wd-demo-hero-buttons {

  margin-top:
    15px;

  display: flex;

  gap:
    8px;

}


.wd-demo-hero-buttons span {

  min-width:
    105px;

  padding:
    7px 11px;

  text-align:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.30
    );

  border-radius:
    999px;

  font-size:
    0.45rem;

  font-weight:
    800;

}


.wd-demo-hero-buttons
span:first-child {

  border-color:
    var(--red);

  background:
    var(--red);

}


/* ==========================================================
   09
   MINI MARQUEE
========================================================== */

.wd-demo-marquee {

  height:
    45px;

  overflow: hidden;

  display: flex;

  align-items:
    center;

  background:
    #080808;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

}


.wd-demo-marquee-track {

  width:
    max-content;

  display: flex;

  align-items:
    center;

  gap:
    17px;

  white-space:
    nowrap;

  will-change:
    transform;

  animation:
    wdDemoMarquee
    22s
    linear
    infinite;

}


.wd-demo-marquee-track span {

  color:
    rgba(
      255,
      255,
      255,
      0.79
    );

  font-size:
    0.49rem;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

}


.wd-demo-marquee-track i {

  width:
    5px;

  height:
    5px;

  flex-shrink: 0;

  border-radius:
    50%;

  background:
    var(--red-light);

}


@keyframes wdDemoMarquee {

  from {

    transform:
      translateX(0);

  }


  to {

    transform:
      translateX(-50%);

  }

}


/* ==========================================================
   MINI SEKTIONEN GEMEINSAM
========================================================== */

.wd-demo-services,
.wd-demo-products,
.wd-demo-clients,
.wd-demo-history,
.wd-demo-career,
.wd-demo-team,
.wd-demo-contact {

  padding:
    48px 5.5%;

}


.wd-demo-heading,
.wd-demo-section-title {

  margin-bottom:
    26px;

}


.wd-demo-heading > span,
.wd-demo-section-title > span,
.wd-demo-counter-side > span {

  display: block;

  margin-bottom:
    8px;

  color:
    var(--red-light);

  font-size:
    0.49rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

}


.wd-demo-heading h3,
.wd-demo-section-title h3 {

  max-width:
    620px;

  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.3rem,
      2.7vw,
      2.25rem
    );

  line-height:
    1.02;

}


.wd-demo-heading p,
.wd-demo-section-title > p {

  max-width:
    570px;

  margin:
    10px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size:
    0.53rem;

  line-height:
    1.55;

}


/* ==========================================================
   10
   MINI LEISTUNGEN
========================================================== */

.wd-demo-services {

  background:
    #101315;

}


.wd-demo-services-layout {

  display: grid;

  grid-template-columns:
    minmax(0, 1.30fr)
    minmax(180px, 0.70fr);

  gap:
    22px;

}


.wd-demo-service-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    11px;

}


.wd-demo-service-grid article {

  min-width: 0;

  padding:
    11px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

}


.wd-demo-service-grid img {

  width: 100%;

  height:
    120px;

  object-fit:
    cover;

  border-radius:
    8px;

}


.wd-demo-service-grid small {

  display: block;

  margin-top:
    10px;

  color:
    var(--red-light);

  font-size:
    0.43rem;

  font-weight:
    900;

  text-transform:
    uppercase;

}


.wd-demo-service-grid strong {

  display: block;

  margin-top:
    4px;

  color:
    #ffffff;

  font-size:
    0.74rem;

}


.wd-demo-service-grid p {

  margin:
    5px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.53
    );

  font-size:
    0.46rem;

  line-height:
    1.5;

}


.wd-demo-service-grid b {

  display: block;

  margin-top:
    11px;

  color:
    rgba(
      255,
      255,
      255,
      0.75
    );

  font-size:
    0.44rem;

  font-weight:
    750;

}


/* ----------------------------------------------------------
   ZÄHLER RECHTS
---------------------------------------------------------- */

.wd-demo-counter-side {

  padding:
    12px 0;

}


.wd-demo-counter-side h4 {

  margin: 0;

  color:
    #ffffff;

  font-size:
    1.15rem;

  line-height:
    1.08;

}


.wd-demo-counter-side > p {

  margin:
    8px 0 18px;

  color:
    rgba(
      255,
      255,
      255,
      0.56
    );

  font-size:
    0.49rem;

  line-height:
    1.5;

}


.wd-demo-counters {

  display: grid;

  gap:
    9px;

}


.wd-demo-counters div {

  min-height:
    82px;

  padding:
    14px;

  display: flex;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );

}


.wd-demo-counters strong {

  color:
    var(--red-light);

  font-size:
    1.18rem;

}


.wd-demo-counters span {

  margin-top:
    3px;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size:
    0.45rem;

}


/* ==========================================================
   11
   MINI PRODUKTE
========================================================== */

.wd-demo-products {

  background:
    #0b0d0e;

}


.wd-demo-product-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    11px;

}


.wd-demo-product-grid article {

  min-width: 0;

  padding:
    12px;

  text-align:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      0.02
    );

}


.wd-demo-product-grid img {

  width: 100%;

  height:
    130px;

  object-fit:
    contain;

}


.wd-demo-product-grid strong {

  display: block;

  margin-top:
    7px;

  color:
    #ffffff;

  font-size:
    0.68rem;

}


.wd-demo-product-grid p {

  margin:
    4px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.50
    );

  font-size:
    0.45rem;

  line-height:
    1.45;

}


/* ==========================================================
   12
   MINI KUNDEN
========================================================== */

.wd-demo-clients {

  overflow: hidden;

  background:
    #101315;

}


.wd-demo-logo-slider {

  position: relative;

  width: 100%;

  overflow: hidden;

  padding:
    5px 0 12px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000000 5%,
      #000000 95%,
      transparent
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000000 5%,
      #000000 95%,
      transparent
    );

}


.wd-demo-logo-track {

  display: flex;

  gap:
    13px;

  width:
    max-content;

  will-change:
    transform;

}


.wd-demo-logo-item {

  width:
    155px;

  height:
    90px;

  flex-shrink: 0;

  padding:
    12px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    14px;

  background:
    rgba(
      250,
      250,
      250,
      0.96
    );

  transition:

    transform
    0.30s
    ease,

    box-shadow
    0.30s
    ease;

}


.wd-demo-logo-item:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 14px 28px
    rgba(0, 0, 0, 0.24);

}


.wd-demo-logo-item img {

  width: 100%;

  height: 100%;

  object-fit:
    contain;

}


.wd-demo-logo-wide img {

  width:
    118%;

  height: auto;

}


.wd-demo-logo-large img {

  width:
    108%;

  height:
    108%;

}


.wd-demo-logo-crop img {

  width:
    128%;

  height:
    128%;

}


/* ==========================================================
   13
   MINI HISTORIE
========================================================== */

.wd-demo-history {

  overflow: hidden;

  background:
    #0b0d0e;

}


.wd-demo-timeline {

  position: relative;

  width: 100%;

  min-height:
    410px;

  margin-top:
    36px;

  padding:
    120px 0;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

}


/* ----------------------------------------------------------
   GRAUE LINIE + ROTER PROGRESS
---------------------------------------------------------- */

.wd-demo-timeline-base,
.wd-demo-timeline-progress {

  position: absolute;

  top:
    50%;

  left:
    2%;

  height:
    5px;

  border-radius:
    999px;

  transform:
    translateY(-50%);

}


.wd-demo-timeline-base {

  right:
    2%;

  z-index:
    1;

  background:
    rgba(
      255,
      255,
      255,
      0.17
    );

}


.wd-demo-timeline-progress {

  z-index:
    2;

  width: 0;

  background:
    linear-gradient(
      90deg,
      var(--red),
      var(--red-light)
    );

  box-shadow:
    0 0 10px
    rgba(255, 48, 70, 0.35);

  transition:
    width
    0.70s
    cubic-bezier(
      0.22,
      0.9,
      0.3,
      1
    );

}


/* ----------------------------------------------------------
   TIMELINE ITEM
---------------------------------------------------------- */

.wd-demo-timeline-item {

  position: relative;

  z-index:
    4;

  width:
    13.5%;

  height:
    220px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

}


/* ----------------------------------------------------------
   PUNKT
---------------------------------------------------------- */

.wd-demo-timeline-point {

  position: absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    7;

  width:
    15px;

  height:
    15px;

  border:
    3px solid
    #ffffff;

  border-radius:
    50%;

  background:
    #111315;

  transform:
    translate(
      -50%,
      -50%
    );

  transition:

    transform
    0.35s
    ease,

    background
    0.35s
    ease,

    border-color
    0.35s
    ease,

    box-shadow
    0.35s
    ease;

}


/* ----------------------------------------------------------
   JAHR
---------------------------------------------------------- */

.wd-demo-timeline-year {

  position: absolute;

  z-index:
    8;

  color:
    #ffffff;

  font-size:
    0.64rem;

  font-weight:
    900;

  transition:
    color
    0.35s
    ease;

}


.wd-demo-timeline-item:nth-of-type(odd)
.wd-demo-timeline-year {

  bottom:
    16px;

}


.wd-demo-timeline-item:nth-of-type(even)
.wd-demo-timeline-year {

  top:
    16px;

}


/* ----------------------------------------------------------
   VERBINDUNG VOM PUNKT
---------------------------------------------------------- */

.wd-demo-timeline-item::before {

  content: "";

  position: absolute;

  left:
    50%;

  width:
    1px;

  height:
    44px;

  background:
    rgba(
      255,
      255,
      255,
      0.23
    );

  transform:
    translateX(-50%);

}


.wd-demo-timeline-item:nth-of-type(odd)::before {

  top:
    50%;

}


.wd-demo-timeline-item:nth-of-type(even)::before {

  bottom:
    50%;

}


/* ----------------------------------------------------------
   TIMELINE KARTE
---------------------------------------------------------- */

.wd-demo-timeline-card {

  position: absolute;

  z-index:
    20;

  width:
    185px;

  overflow: hidden;

  opacity: 0;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius:
    13px;

  background:
    rgba(
      18,
      18,
      18,
      0.97
    );

  box-shadow:
    0 20px 45px
    rgba(0, 0, 0, 0.42);

  transform:
    translateY(10px)
    scale(0.97);

  transition:

    opacity
    0.40s
    ease,

    transform
    0.40s
    ease;

}


.wd-demo-timeline-item:nth-of-type(odd)
.wd-demo-timeline-card {

  top:
    -25px;

}


.wd-demo-timeline-item:nth-of-type(even)
.wd-demo-timeline-card {

  bottom:
    -25px;

}


.wd-demo-timeline-card img {

  width: 100%;

  height:
    82px;

  object-fit:
    cover;

}


.wd-demo-timeline-card > div {

  padding:
    10px;

}


.wd-demo-timeline-card strong {

  display: block;

  color:
    var(--red-light);

  font-size:
    0.54rem;

  line-height:
    1.25;

}


.wd-demo-timeline-card p {

  margin:
    5px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.55
    );

  font-size:
    0.42rem;

  line-height:
    1.45;

}


/* ----------------------------------------------------------
   AKTIVE TIMELINE
---------------------------------------------------------- */

.wd-demo-timeline-item.is-active {

  z-index:
    15;

}


.wd-demo-timeline-item.is-active
.wd-demo-timeline-card {

  opacity: 1;

  transform:
    translateY(0)
    scale(1);

}


.wd-demo-timeline-item.is-active
.wd-demo-timeline-point {

  border-color:
    var(--red-light);

  background:
    var(--red-light);

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.25);

  box-shadow:
    0 0 16px
    rgba(255, 48, 70, 0.65);

}


.wd-demo-timeline-item.is-active
.wd-demo-timeline-year {

  color:
    var(--red-light);

}


/* ==========================================================
   14
   MINI KARRIERE
========================================================== */

.wd-demo-career {

  background:
    #101315;

}


.wd-demo-career-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    11px;

}


.wd-demo-career-grid article {

  min-height:
    145px;

  padding:
    16px;

  display: flex;

  flex-direction:
    column;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );

  transition:

    transform
    0.30s
    ease,

    border-color
    0.30s
    ease;

}


.wd-demo-career-grid article:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.18
    );

}


.wd-demo-career-grid strong {

  display: block;

  color:
    #ffffff;

  font-size:
    0.67rem;

}


.wd-demo-career-grid p {

  margin:
    8px 0;

  color:
    rgba(
      255,
      255,
      255,
      0.53
    );

  font-size:
    0.47rem;

  line-height:
    1.5;

}


.wd-demo-career-grid span {

  margin-top:
    auto;

  color:
    var(--red-light);

  font-size:
    0.47rem;

  font-weight:
    850;

}


/* ==========================================================
   15
   MINI ANSPRECHPARTNER
========================================================== */

.wd-demo-team {

  overflow: hidden;

  background:
    #0b0d0e;

}


.wd-demo-person-slider {

  position: relative;

  width: 100%;

  overflow: hidden;

  padding:
    5px 0 14px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000000 5%,
      #000000 95%,
      transparent
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000000 5%,
      #000000 95%,
      transparent
    );

}


.wd-demo-person-track {

  display: flex;

  gap:
    13px;

  width:
    max-content;

  will-change:
    transform;

}


.wd-demo-person-card {

  width:
    215px;

  min-width:
    215px;

  height:
    275px;

  flex-shrink: 0;

  padding:
    17px;

  display: flex;

  flex-direction:
    column;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-radius:
    19px;

  background:
    rgba(
      18,
      18,
      18,
      0.80
    );

  box-shadow:
    0 15px 35px
    rgba(0, 0, 0, 0.25);

  transition:

    transform
    0.30s
    ease,

    border-color
    0.30s
    ease,

    background
    0.30s
    ease;

}


.wd-demo-person-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.20
    );

  background:
    rgba(
      28,
      28,
      28,
      0.90
    );

}


.wd-demo-person-card h4 {

  margin:
    0 0 6px;

  color:
    #ffffff;

  font-size:
    0.77rem;

}


.wd-demo-person-position {

  min-height:
    39px;

  margin-bottom:
    13px;

  color:
    rgba(
      255,
      255,
      255,
      0.57
    );

  font-size:
    0.48rem;

  line-height:
    1.4;

}


.wd-demo-person-contact {

  display: grid;

  gap:
    8px;

}


.wd-demo-person-contact span {

  display: block;

  margin-bottom:
    2px;

  color:
    var(--red-light);

  font-size:
    0.40rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.wd-demo-person-contact p {

  margin: 0;

  color:
    #ffffff;

  font-size:
    0.47rem;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;

}


.wd-demo-person-button {

  min-height:
    30px;

  margin-top:
    auto;

  padding:
    0 10px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  font-size:
    0.45rem;

  font-weight:
    800;

}


/* ==========================================================
   16
   MINI KONTAKT
========================================================== */

.wd-demo-contact {

  background:
    #101315;

}


.wd-demo-form {

  padding:
    18px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    9px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    17px;

  background:
    rgba(
      18,
      18,
      18,
      0.67
    );

}


.wd-demo-form > div {

  min-height:
    36px;

  padding:
    10px 12px;

  color:
    rgba(
      255,
      255,
      255,
      0.45
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  font-size:
    0.46rem;

}


.wd-demo-message {

  min-height:
    82px !important;

  grid-column:
    1 / -1;

}


.wd-demo-upload {

  min-height:
    58px !important;

  grid-column:
    1 / -1;

  display: flex;

  flex-direction:
    column;

  gap:
    6px;

  border-style:
    dashed !important;

}


.wd-demo-upload i {

  width:
    fit-content;

  padding:
    5px 8px;

  color:
    rgba(
      255,
      255,
      255,
      0.60
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    5px;

  font-style:
    normal;

}


.wd-demo-send {

  grid-column:
    1 / -1;

  min-height:
    38px !important;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff !important;

  background:
    var(--red) !important;

  border-color:
    var(--red) !important;

  border-radius:
    999px !important;

  font-weight:
    850;

}


/* ==========================================================
   17
   MINI GOOGLE MAPS
========================================================== */

.wd-demo-map {

  position: relative;

  width: 100%;

  height:
    250px;

  overflow: hidden;

  background:
    #d7dcd3;

}


/* ----------------------------------------------------------
   ECHTES GOOGLE MAPS IFRAME
---------------------------------------------------------- */

.wd-demo-map iframe {

  position: absolute;

  inset: 0;

  z-index:
    1;

  width: 100%;

  height: 100%;

  display: block;

  border: 0;

  filter:
    saturate(0.86)
    contrast(1.02);

  pointer-events:
    none;

}


/* ----------------------------------------------------------
   Leichte Kante auf der Karte
---------------------------------------------------------- */

.wd-demo-map::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index:
    3;

  pointer-events:
    none;

  box-shadow:
    inset
    0 0 0 1px
    rgba(0, 0, 0, 0.12);

}


/* ----------------------------------------------------------
   Roter Anatomy-Rahmen muss ÜBER Google Maps liegen
---------------------------------------------------------- */

.wd-demo-map::after {

  z-index:
    10;

}


/* ==========================================================
   18
   MINI FOOTER
========================================================== */

.wd-demo-footer {

  min-height:
    150px;

  padding:
    29px;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  background:
    #080808;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

}


.wd-demo-footer > strong {

  color:
    #ffffff;

  font-size:
    0.64rem;

}


.wd-demo-footer > span,
.wd-demo-footer > small {

  margin-top:
    5px;

  color:
    rgba(
      255,
      255,
      255,
      0.50
    );

  font-size:
    0.45rem;

}


.wd-demo-footer div {

  margin-top:
    13px;

  display: flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    15px;

}


.wd-demo-footer div span {

  color:
    rgba(
      255,
      255,
      255,
      0.75
    );

  font-size:
    0.47rem;

  font-weight:
    700;

}


/* ==========================================================
   19
   WORAUF WIR ACHTEN
========================================================== */

.wd-quality-section {

  background:

    radial-gradient(
      circle at 12% 18%,
      rgba(255, 48, 70, 0.05),
      transparent 27%
    ),

    var(--wd-bg);

}


.wd-quality-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    20px;

}


.wd-quality-card {

  min-width: 0;

  min-height:
    300px;

  padding:
    27px;

  display: grid;

  grid-template-columns:
    minmax(170px, 0.40fr)
    minmax(0, 0.60fr);

  gap:
    28px;

  align-items:
    center;

  border:
    1px solid
    var(--wd-line);

  border-radius:
    20px;

  background:

    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      transparent 60%
    ),

    var(--wd-card);

  transition:

    transform
    0.35s
    ease,

    border-color
    0.35s
    ease,

    background
    0.35s
    ease,

    box-shadow
    0.35s
    ease;

}


.wd-quality-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(
      255,
      48,
      70,
      0.40
    );

  background:

    linear-gradient(
      135deg,
      rgba(197, 0, 26, 0.09),
      transparent 58%
    ),

    var(--wd-card);

  box-shadow:
    0 20px 50px
    rgba(0, 0, 0, 0.20);

}


.wd-quality-visual {

  position: relative;

  width: 100%;

  min-height:
    190px;

  overflow: hidden;

  display: grid;

  place-items:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #0d1011,
      #080a0b
    );

}


.wd-quality-copy > span {

  color:
    var(--red-light);

  font-size:
    0.63rem;

  font-weight:
    900;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

}


.wd-quality-copy h3 {

  margin:
    10px 0 12px;

  color:
    #ffffff;

  font-size:
    clamp(
      1.35rem,
      1.8vw,
      1.8rem
    );

}


.wd-quality-copy p {

  margin: 0;

  color:
    var(--wd-muted);

  font-size:
    0.81rem;

  line-height:
    1.62;

}


/* ==========================================================
   QUALITY 01
   WIEDERERKENNUNG
========================================================== */

.wd-brand-visual {

  padding:
    25px;

}


.wd-brand-logo-stage {

  position: relative;

  width:
    min(
      185px,
      86%
    );

  aspect-ratio:
    1.5 / 1;

}


.wd-brand-logo-stage img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit:
    contain;

}


.wd-brand-logo-base {

  opacity:
    0.32;

  filter:
    grayscale(0.45)
    brightness(0.78);

}


.wd-brand-logo-highlight {

  opacity: 1;

  clip-path:
    inset(
      0
      100%
      0
      0
    );

  filter:

    drop-shadow(
      0 0 8px
      rgba(255, 255, 255, 0.30)
    )

    drop-shadow(
      0 0 11px
      rgba(255, 48, 70, 0.26)
    );

  animation:
    wdLogoHighlight
    4.5s
    ease-in-out
    infinite;

}


.wd-brand-shine {

  position: absolute;

  top:
    7%;

  bottom:
    7%;

  left:
    -25%;

  width:
    24%;

  opacity: 0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.62),
      rgba(255, 48, 70, 0.38),
      transparent
    );

  filter:
    blur(7px);

  transform:
    skewX(-15deg);

  animation:
    wdLogoShine
    4.5s
    ease-in-out
    infinite;

}


@keyframes wdLogoHighlight {

  0%,
  10% {

    clip-path:
      inset(
        0
        100%
        0
        0
      );

  }


  42%,
  70% {

    clip-path:
      inset(
        0
        0
        0
        0
      );

  }


  100% {

    clip-path:
      inset(
        0
        0
        0
        100%
      );

  }

}


@keyframes wdLogoShine {

  0%,
  13% {

    left:
      -25%;

    opacity: 0;

  }


  25% {

    opacity:
      0.9;

  }


  58% {

    left:
      104%;

    opacity:
      0.1;

  }


  100% {

    left:
      104%;

    opacity: 0;

  }

}


/* ==========================================================
   QUALITY 02
   ZEITGEMÄSS
========================================================== */

.wd-modern-browser {

  width:
    76%;

  padding:
    18px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    10px;

  background:
    #171b1d;

  transition:

    transform
    0.35s
    ease,

    border-color
    0.35s
    ease;

}


.wd-modern-browser > span {

  display: block;

  width:
    34px;

  height:
    4px;

  margin-bottom:
    28px;

  background:
    var(--red-light);

}


.wd-modern-browser strong {

  display: block;

  margin-bottom:
    14px;

  color:
    #ffffff;

}


.wd-modern-browser i {

  display: block;

  width: 100%;

  height:
    6px;

  margin:
    8px 0;

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

}


.wd-modern-browser i:last-child {

  width:
    65%;

}


.wd-quality-card:hover
.wd-modern-browser {

  transform:
    translateY(-5px)
    rotate(-1deg);

  border-color:
    rgba(
      255,
      48,
      70,
      0.38
    );

}


/* ==========================================================
   QUALITY 03
   NUTZERFÜHRUNG
========================================================== */

.wd-flow-path {

  display: flex;

  align-items:
    center;

  gap:
    7px;

}


.wd-flow-path span {

  padding:
    7px 8px;

  color:
    rgba(
      255,
      255,
      255,
      0.70
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    7px;

  font-size:
    0.56rem;

}


.wd-flow-path i {

  width:
    16px;

  height:
    1px;

  background:
    rgba(
      255,
      255,
      255,
      0.24
    );

}


.wd-flow-visual b {

  position: absolute;

  top:
    50%;

  left:
    50%;

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--red-light);

  box-shadow:
    0 0 12px
    rgba(255, 48, 70, 0.55);

  animation:
    wdFlowMove
    3.5s
    linear
    infinite;

}


@keyframes wdFlowMove {

  0% {

    transform:
      translate(
        -75px,
        -50%
      );

  }


  100% {

    transform:
      translate(
        75px,
        -50%
      );

  }

}


/* ==========================================================
   QUALITY 04
   RESPONSIVE
========================================================== */

.wd-quality-responsive {

  padding:
    25px;

  display: flex;

  align-items:
    flex-end;

  justify-content:
    center;

  gap:
    22px;

}


.wd-quality-device {

  flex-shrink: 0;

  background:
    #0a0c0d;

  transition:

    border-color
    0.45s
    ease,

    transform
    0.45s
    ease,

    box-shadow
    0.45s
    ease;

}


.wd-quality-desktop {

  width:
    92px;

  height:
    60px;

  border:
    3px solid
    #41474a;

  border-radius:
    6px;

}


.wd-quality-tablet {

  width:
    48px;

  height:
    68px;

  border:
    3px solid
    #555b5f;

  border-radius:
    8px;

}


.wd-quality-phone {

  width:
    29px;

  height:
    55px;

  border:
    3px solid
    #6a7074;

  border-radius:
    8px;

}


.wd-quality-device span {

  display: block;

  height:
    4px;

  margin:
    7px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

}


.wd-quality-device.is-active {

  border-color:
    var(--red-light);

  transform:
    translateY(-7px);

  box-shadow:
    0 0 20px
    rgba(255, 48, 70, 0.30);

}


.wd-quality-device.is-active span {

  background:
    var(--red-light);

}


/* ==========================================================
   QUALITY 05
   INDIVIDUELL
========================================================== */

.wd-modules-visual {

  padding:
    32px;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    8px;

}


.wd-modules-visual div {

  width: 100%;

  height:
    52px;

  border-radius:
    6px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  transition:

    transform
    0.35s
    ease,

    background
    0.35s
    ease;

}


.wd-modules-visual
div:first-child {

  grid-column:
    1 / -1;

}


.wd-quality-card:hover
.wd-modules-visual
div:first-child {

  background:
    rgba(
      197,
      0,
      26,
      0.30
    );

}


.wd-quality-card:hover
.wd-modules-visual
div:nth-child(2) {

  transform:
    translateX(4px);

}


.wd-quality-card:hover
.wd-modules-visual
div:nth-child(3) {

  transform:
    translateX(-4px);

}


/* ==========================================================
   QUALITY 06
   DETAIL
========================================================== */

.wd-detail-visual {

  padding:
    24px;

}


.wd-detail-browser {

  width:
    86%;

  height:
    145px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius:
    10px;

  background:
    #15191b;

  transition:

    transform
    0.40s
    ease,

    border-color
    0.40s
    ease;

}


.wd-detail-browserbar {

  height:
    23px;

  padding:
    0 8px;

  display: flex;

  align-items:
    center;

  gap:
    4px;

  background:
    #1d2123;

}


.wd-detail-browserbar span {

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.25
    );

}


.wd-detail-browserbar
span:first-child {

  background:
    var(--red-light);

}


.wd-detail-canvas {

  position: relative;

  height:
    calc(
      100% - 23px
    );

  padding:
    15px;

}


.wd-detail-heading {

  width:
    62%;

  height:
    14px;

  margin-bottom:
    11px;

  border-radius:
    3px;

  background:
    rgba(
      255,
      255,
      255,
      0.15
    );

}


.wd-detail-grid {

  display: grid;

  grid-template-columns:
    1fr
    0.72fr;

  gap:
    9px;

}


.wd-detail-grid span {

  height:
    47px;

  border-radius:
    4px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

}


.wd-detail-guide-v,
.wd-detail-guide-h {

  position: absolute;

  opacity: 0;

  background:
    var(--red-light);

  transition:

    opacity
    0.35s
    ease,

    transform
    0.35s
    ease;

}


.wd-detail-guide-v {

  top: 0;

  bottom: 0;

  left:
    50%;

  width:
    1px;

  transform:
    translateX(-10px);

}


.wd-detail-guide-h {

  top:
    52%;

  right: 0;

  left: 0;

  height:
    1px;

  transform:
    translateY(8px);

}


.wd-detail-focus {

  position: absolute;

  right:
    18px;

  bottom:
    14px;

  width:
    27px;

  height:
    27px;

  border:
    2px solid
    var(--red-light);

  border-radius:
    50%;

  opacity:
    0.45;

  transition:

    transform
    0.40s
    ease,

    opacity
    0.40s
    ease,

    box-shadow
    0.40s
    ease;

}


.wd-detail-focus span {

  position: absolute;

  top:
    50%;

  left:
    50%;

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--red-light);

  transform:
    translate(
      -50%,
      -50%
    );

}


.wd-quality-card:hover
.wd-detail-browser {

  transform:
    scale(1.04);

  border-color:
    rgba(
      255,
      48,
      70,
      0.38
    );

}


.wd-quality-card:hover
.wd-detail-guide-v,
.wd-quality-card:hover
.wd-detail-guide-h {

  opacity:
    0.65;

  transform:
    translate(0);

}


.wd-quality-card:hover
.wd-detail-focus {

  opacity: 1;

  transform:
    translate(
      -16px,
      -9px
    )
    scale(1.08);

  box-shadow:
    0 0 15px
    rgba(255, 48, 70, 0.35);

}


/* ==========================================================
   20
   PROZESS
========================================================== */

.wd-process-section {

  background:
    var(--wd-bg-deep);

}


.wd-process-flow {

  position: relative;

  width: 100%;

  padding-top:
    44px;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      18px,
      2vw,
      30px
    );

}


.wd-process-base {

  position: absolute;

  top:
    69px;

  right: 0;

  left: 0;

  height:
    2px;

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

}


.wd-process-progress {

  display: block;

  width: 0;

  height: 100%;

  background:
    var(--red-light);

  box-shadow:
    0 0 10px
    rgba(255, 48, 70, 0.50);

  transition:

    width
    0.70s
    ease,

    height
    0.70s
    ease;

}


.wd-process-item {

  position: relative;

  z-index: 2;

  min-width: 0;

}


.wd-process-dot {

  width:
    52px;

  height:
    52px;

  margin-bottom:
    28px;

  display: grid;

  place-items:
    center;

  color:
    transparent;

  background:
    var(--wd-bg-deep);

  border: 0;

  font-size:
    1.35rem;

  font-weight:
    900;

  cursor:
    pointer;

  -webkit-text-stroke:
    1px
    rgba(
      255,
      255,
      255,
      0.28
    );

  transition:

    transform
    0.40s
    ease,

    filter
    0.40s
    ease;

}


.wd-process-item.is-active
.wd-process-dot {

  -webkit-text-stroke:
    1.2px
    var(--red-light);

  filter:
    drop-shadow(
      0 0 6px
      rgba(255, 48, 70, 0.50)
    );

  transform:
    scale(1.07);

}


.wd-process-label {

  display: block;

  color:
    var(--red-light);

  font-size:
    0.63rem;

  font-weight:
    900;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;

}


.wd-process-item h3 {

  margin:
    9px 0 16px;

  color:
    #ffffff;

  font-size:
    clamp(
      1.05rem,
      1.4vw,
      1.3rem
    );

}


.wd-process-item ul {

  margin: 0;

  padding: 0;

  display: grid;

  gap:
    8px;

  list-style:
    none;

}


.wd-process-item li {

  position: relative;

  padding-left:
    14px;

  color:
    var(--wd-muted);

  font-size:
    0.74rem;

  line-height:
    1.5;

}


.wd-process-item li::before {

  content: "";

  position: absolute;

  top:
    0.60em;

  left: 0;

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    var(--red-light);

}


/* ==========================================================
   21
   FAQ
========================================================== */

.wd-faq-list {

  border-top:
    1px solid
    var(--wd-line);

}


.wd-faq-item {

  border-bottom:
    1px solid
    var(--wd-line);

}


.wd-faq-item summary {

  padding:
    26px 0;

  display: grid;

  grid-template-columns:
    1fr
    34px;

  gap:
    20px;

  align-items:
    center;

  color:
    #ffffff;

  list-style:
    none;

  cursor:
    pointer;

  font-size:
    1.18rem;

  font-weight:
    750;

}


.wd-faq-item
summary::-webkit-details-marker {

  display:
    none;

}


.wd-faq-item summary b {

  color:
    var(--red-light);

  font-size:
    1.50rem;

  font-weight:
    300;

  transition:
    transform
    0.30s
    ease;

}


.wd-faq-item[open]
summary b {

  transform:
    rotate(45deg);

}


.wd-faq-item > p {

  max-width:
    820px;

  margin: 0;

  padding:
    0 50px 28px 0;

  color:
    var(--wd-muted);

  line-height:
    1.7;

}


/* ==========================================================
   22
   ANFRAGE
========================================================== */

.wd-final-section {

  padding-top:
    72px;

  padding-bottom:
    105px;

  background:
    var(--wd-bg);

}


.wd-final-card {

  position: relative;

  padding:
    clamp(
      42px,
      5vw,
      68px
    );

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at 5% 20%,
      rgba(197, 0, 26, 0.13),
      transparent 38%
    ),

    rgba(
      255,
      255,
      255,
      0.025
    );

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.22);

}


/* ----------------------------------------------------------
   KEINE ROTE LINIE OBEN
---------------------------------------------------------- */

.wd-final-card::before,
.wd-final-card::after {

  display:
    none !important;

  content:
    none !important;

}


.wd-final-copy {

  max-width:
    850px;

}


.wd-final-copy
> p:not(.wd-kicker) {

  max-width:
    720px;

  margin:
    22px 0 0;

  color:
    var(--wd-muted);

  line-height:
    1.7;

}


.wd-final-button {

  min-height:
    56px;

  margin-top:
    30px;

  padding:
    16px 29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    #f10d1b;

  border:
    1px solid
    #f10d1b;

  border-radius:
    999px;

  box-shadow:
    0 15px 35px
    rgba(241, 13, 27, 0.24);

  font-size:
    0.94rem;

  font-weight:
    850;

  text-decoration:
    none;

  transition:

    transform
    0.25s
    ease,

    background
    0.25s
    ease,

    box-shadow
    0.25s
    ease;

}


.wd-final-button:hover {

  color:
    #ffffff;

  background:
    #c5001a;

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(241, 13, 27, 0.32);

}


body#webdesign
.footer-small {

  color:
    var(--gray-soft);

}


/* ==========================================================
   23
   RESPONSIVE REGELN

   ALLE MEDIA QUERIES AB HIER UNTEN
========================================================== */


/* ==========================================================
   BIS 1180 PX
========================================================== */

@media (max-width: 1180px) {


  .wd-page {

    padding-top:
      86px;

  }


  /* --------------------------------------------------------
     RESPONSIVE DESIGN
  -------------------------------------------------------- */

  .wd-responsive-layout {

    grid-template-columns:
      minmax(280px, 0.38fr)
      minmax(0, 0.62fr);

    gap:
      45px;

  }


  .wd-responsive-live-device.is-desktop {

    width:
      100%;

    height:
      430px;

  }


  .wd-responsive-live-device.is-tablet {

    width:
      360px;

    height:
      520px;

  }


  .wd-responsive-live-device.is-phone {

    width:
      225px;

    height:
      510px;

  }


  /* --------------------------------------------------------
     ANATOMY
  -------------------------------------------------------- */

  .wd-anatomy-layout {

    --wd-anatomy-info-width:
      285px;

    --wd-anatomy-gap:
      38px;

  }


  .wd-anatomy-info {

    padding:
      26px;

  }


  .wd-demo-nav {

    gap:
      7px;

  }


  .wd-demo-nav span {

    font-size:
      0.38rem;

  }


  .wd-demo-timeline-card {

    width:
      165px;

  }


  .wd-demo-person-card {

    width:
      200px;

    min-width:
      200px;

  }


  /* --------------------------------------------------------
     QUALITY
  -------------------------------------------------------- */

  .wd-quality-card {

    grid-template-columns:
      minmax(145px, 0.38fr)
      minmax(0, 0.62fr);

    gap:
      22px;

  }

}


/* ==========================================================
   BIS 980 PX
========================================================== */

@media (max-width: 980px) {


  .wd-page {

    padding-top:
      82px;

  }


  /* --------------------------------------------------------
     RESPONSIVE DESIGN
  -------------------------------------------------------- */

  .wd-responsive-layout {

    grid-template-columns:
      1fr;

    gap:
      55px;

  }


  .wd-device-cluster {

    width:
      min(
        100%,
        570px
      );

    margin:
      0 auto;

  }


  .wd-responsive-live {

    width:
      100%;

  }


  /* --------------------------------------------------------
     ANATOMY

     Auf Tablet/kleiner kein Platz für
     schwebende Box rechts.

     Deshalb kommt die Erklärung unter
     die Beispielwebsite.
  -------------------------------------------------------- */

  .wd-anatomy-layout {

    display:
      flex;

    flex-direction:
      column;

    gap:
      30px;

  }


  .wd-anatomy-browser {

    width:
      100%;

  }


  .wd-anatomy-info {

    position:
      relative !important;

    top:
      auto !important;

    right:
      auto !important;

    width:
      100%;

    max-width:
      none;

    height:
      auto;

    margin: 0;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      none !important;

  }


  .wd-anatomy-info.reveal,
  .wd-anatomy-info.reveal.is-visible,
  .wd-anatomy-info.reveal.is-shown,
  .wd-anatomy-info.reveal.is-visible.is-shown {

    opacity:
      1 !important;

    visibility:
      visible !important;

    transform:
      none !important;

  }


  /* --------------------------------------------------------
     QUALITY
  -------------------------------------------------------- */

  .wd-quality-grid {

    grid-template-columns:
      1fr;

  }


  .wd-quality-card {

    grid-template-columns:
      minmax(190px, 0.38fr)
      minmax(0, 0.62fr);

  }

}


/* ==========================================================
   BIS 700 PX
========================================================== */

@media (max-width: 700px) {


  .wd-page {

    padding-top:
      76px;

  }


  .wd-section {

    padding:
      72px 0;

  }


  .wd-section-intro,
  .wd-faq-heading {

    margin-bottom:
      38px;

  }


  .wd-section-intro h2,
  .wd-faq-heading h2,
  .wd-final-card h2 {

    font-size:
      clamp(
        2.10rem,
        10vw,
        3.45rem
      );

    line-height:
      1.08;

  }


  /* ======================================================
     HERO
  ====================================================== */

  .wd-hero {

    min-height:
      800px;

  }


  .wd-hero-bg {

    top: auto;

    right: 0;

    bottom:
      -2%;

    width:
      100%;

    height:
      58%;

    opacity:
      0.68;

  }


  .wd-hero-overlay {

    background:
      linear-gradient(
        180deg,
        #080808 0%,
        rgba(8, 8, 8, 0.96) 37%,
        rgba(8, 8, 8, 0.63) 57%,
        rgba(8, 8, 8, 0.36) 73%,
        rgba(8, 8, 8, 0.95) 100%
      );

  }


  .wd-hero-inner {

    min-height:
      800px;

    padding-top:
      36px;

    padding-bottom:
      20px;

  }


  .wd-hero-services {

    gap:
      16px;

    margin-bottom:
      30px;

    font-size:
      0.63rem;

  }


  .wd-hero-content {

    width:
      100%;

    max-width:
      520px;

  }


  .wd-hero-content h1 {

    font-size:
      clamp(
        3rem,
        15vw,
        4.4rem
      );

  }


  .wd-hero-facts {

    grid-template-columns:
      1fr;

    padding-top:
      18px;

  }


  .wd-hero-fact,
  .wd-hero-fact:first-child {

    min-height: 0;

    padding:
      14px 0;

    grid-template-columns:
      35px
      minmax(0, 1fr);

  }


  .wd-hero-fact:not(:last-child)::after {

    top: auto;

    right: 0;

    bottom: 0;

    left: 0;

    width: auto;

    height:
      1px;

  }


  /* ======================================================
     RESPONSIVE LINKS
  ====================================================== */

  .wd-device-cluster {

    gap:
      35px;

  }


  .wd-device-lower-row {

    width:
      92%;

    gap:
      25px;

  }


  /* ======================================================
     RESPONSIVE LIVE
  ====================================================== */

  .wd-responsive-live-stage {

    min-height:
      430px;

    padding:
      18px 8px;

  }


  .wd-responsive-live-device.is-desktop {

    width:
      100%;

    height:
      310px;

  }


  .wd-responsive-live-device.is-tablet {

    width:
      245px;

    height:
      390px;

  }


  .wd-responsive-live-device.is-phone {

    width:
      170px;

    height:
      400px;

  }


  .wd-responsive-note {

    grid-template-columns:
      1fr;

    gap:
      8px;

  }


  /* ======================================================
     MINI WEBSITE
  ====================================================== */

  .wd-demo-header {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .wd-demo-nav {

    width:
      100%;

    flex-wrap:
      wrap;

    justify-content:
      flex-start;

    gap:
      8px 12px;

  }


  .wd-demo-hero {

    height:
      330px;

  }


  .wd-demo-hero-content {

    width:
      70%;

  }


  .wd-demo-services-layout {

    grid-template-columns:
      1fr;

  }


  .wd-demo-product-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .wd-demo-logo-item {

    width:
      135px;

    height:
      80px;

  }


  /* --------------------------------------------------------
     Timeline bleibt optisch horizontal
  -------------------------------------------------------- */

  .wd-demo-history {

    overflow:
      hidden;

  }


  .wd-demo-timeline {

    width:
      760px;

    min-width:
      760px;

    transform:
      scale(0.78);

    transform-origin:
      top left;

    margin-bottom:
      -80px;

  }


  .wd-demo-career-grid {

    grid-template-columns:
      1fr;

  }


  .wd-demo-person-card {

    width:
      190px;

    min-width:
      190px;

    height:
      265px;

  }


  .wd-demo-form {

    grid-template-columns:
      1fr;

  }


  .wd-demo-message,
  .wd-demo-upload,
  .wd-demo-send {

    grid-column:
      auto;

  }


  .wd-demo-map {

    height:
      220px;

  }


  .wd-anatomy-info {

    padding:
      26px;

  }


  /* ======================================================
     QUALITY
  ====================================================== */

  .wd-quality-card {

    min-height:
      0;

    grid-template-columns:
      1fr;

    gap:
      20px;

  }


  .wd-quality-visual {

    min-height:
      185px;

  }


  .wd-quality-responsive {

    gap:
      14px;

  }


  /* ======================================================
     PROZESS
  ====================================================== */

  .wd-process-flow {

    padding-top: 0;

    padding-left:
      60px;

    grid-template-columns:
      1fr;

    gap:
      35px;

  }


  .wd-process-base {

    top: 0;

    right:
      auto;

    bottom: 0;

    left:
      22px;

    width:
      2px;

    height:
      auto;

  }


  .wd-process-progress {

    width:
      100%;

    height:
      0;

  }


  .wd-process-item {

    min-height:
      145px;

  }


  .wd-process-dot {

    position: absolute;

    top: 0;

    left:
      -60px;

    margin: 0;

  }


  /* ======================================================
     CTA
  ====================================================== */

  .wd-final-section {

    padding-top:
      58px;

    padding-bottom:
      74px;

  }


  .wd-final-card {

    padding:
      34px 24px;

  }


  .wd-final-button {

    width:
      100%;

  }

}


/* ==========================================================
   BIS 420 PX
========================================================== */

@media (max-width: 420px) {


  /* ======================================================
     RESPONSIVE
  ====================================================== */

  .wd-device-lower-row {

    width:
      100%;

    grid-template-columns:
      1fr
      0.58fr;

    gap:
      18px;

  }


  .wd-cluster-phone {

    width:
      78%;

  }


  .wd-responsive-live-device.is-desktop {

    height:
      255px;

  }


  .wd-responsive-live-device.is-tablet {

    width:
      210px;

    height:
      345px;

  }


  .wd-responsive-live-device.is-phone {

    width:
      148px;

    height:
      355px;

  }


  /* ======================================================
     MINI WEBSITE
  ====================================================== */

  .wd-demo-services,
  .wd-demo-products,
  .wd-demo-clients,
  .wd-demo-history,
  .wd-demo-career,
  .wd-demo-team,
  .wd-demo-contact {

    padding:
      38px 20px;

  }


  .wd-demo-service-grid,
  .wd-demo-product-grid {

    grid-template-columns:
      1fr;

  }


  .wd-demo-hero {

    height:
      300px;

  }


  .wd-demo-hero-content {

    left:
      8%;

    bottom:
      12%;

    width:
      80%;

  }


  .wd-demo-hero-buttons {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .wd-demo-hero-buttons span {

    min-width:
      120px;

  }


  .wd-demo-logo-item {

    width:
      125px;

    height:
      74px;

  }


  .wd-demo-person-card {

    width:
      178px;

    min-width:
      178px;

  }


  .wd-demo-map {

    height:
      190px;

  }


  .wd-anatomy-info {

    padding:
      23px;

  }


  /* ======================================================
     QUALITY
  ====================================================== */

  .wd-quality-responsive {

    gap:
      10px;

    padding:
      20px 12px;

  }


  .wd-quality-desktop {

    width:
      80px;

    height:
      53px;

  }


  .wd-quality-tablet {

    width:
      42px;

    height:
      61px;

  }


  .wd-quality-phone {

    width:
      26px;

    height:
      50px;

  }


  .wd-flow-path {

    gap:
      4px;

  }


  .wd-flow-path span {

    padding:
      6px;

    font-size:
      0.52rem;

  }


  .wd-flow-path i {

    width:
      11px;

  }

}


/* ==========================================================
   REDUZIERTE BEWEGUNGEN
========================================================== */

@media (prefers-reduced-motion: reduce) {


  .wd-brand-logo-highlight,
  .wd-brand-shine,
  .wd-flow-visual b,
  .wd-demo-marquee-track {

    animation:
      none;

  }


  .wd-changing-word,
  .wd-cluster-device,
  .wd-responsive-live-device,
  .wd-quality-device,
  .wd-process-progress,
  .wd-anatomy-part,
  .wd-anatomy-part::after,
  .wd-anatomy-info,
  .wd-demo-timeline-progress,
  .wd-demo-timeline-card,
  .wd-demo-timeline-point {

    transition-duration:
      0.01ms !important;

  }

}